<link rel="stylesheet" href="ccay/example/demo.css" type="text/css" />
<script type="text/javascript" src="ccay/example/demo.js" charset="utf-8"></script>
<script type="text/javascript" src="ccay/htmlarea/kindeditor/kindeditor.js"></script>
<script type="text/javascript" src="ccay/htmlarea/kindeditor/lang/en.js"></script>
<script type="text/javascript" src="ccay/htmlarea/kindeditor/lang/zh_CN.js"></script>
<script type="text/javascript" src="ccay/example/ui/richtext/richText.js" />

<div id="richtext">
<div title="API">
		<div>
			<h2>KindEditor.create('#editorId', options);</h2>
			<h3>作用：根据传入的options设置，初始化富文本编辑器。</h3>
			<form id="param" class="init ccay-form">
				<div class="ccay-form-body ccay-form-custom">
					<ul>

						<li class="ccay-form-row"><samp>
								<h3>参数</h3>
							</samp> <span class="ccay-form-input">
								<h3>描述</h3>
						</span></li>

						<li class="ccay-form-row">
						    <samp class="i18n" i18nKey="'#editorId'"></samp>
								<span class="ccay-form-input">编辑器的div的id</span>
						</li>

						<li class="ccay-form-row"><samp class="i18n"
								i18nKey="options"></samp> <span class="ccay-form-input">
								{Object}
								<p>设置编辑器的高宽等，具体参考kindEditor的Api文档。
						</span></li>
					</ul>
				</div>
			</form>
		</div>
		
	</div>
<div title="Demo">
	    <h3 style="color:red">注意：由于公司信息安全等问题，自行使用该组件时，后果自行负责，我们概不负责也不支持此组件的使用！！！</h3>	
	    <div style='padding-left:30px;padding-top:30px'> 
		 	<textarea id="editor" name="content" ></textarea>
         <div>
            <input  onclick="Ccay.example.ui.richtext.setValue()" type="button"  value="设值"/>	
	        <input  onclick="Ccay.example.ui.richtext.getValue()" type="button"  value="取值"/>	
	        <input  onclick="Ccay.example.ui.richtext.isEmpty()" type="button"  value="判断是否为空(返回true或false)"/>
	        <input  onclick="Ccay.example.ui.richtext.count()" type="button"  value="取得输入字数"/>
	        <p>
				您当前输入了 <span class="word_count1">0</span> 个文字。（字数统计包含HTML代码。）<br />
				您当前输入了 <span class="word_count2">0</span> 个文字。（字数统计包含纯文本、IMG、EMBED，不包含换行符，IMG和EMBED算一个文字。）
			</p>
	     </div>
	     <div  style='padding-bottom:30px;padding-top:30px;'>
	         <div class="ccay-form-body ccay-form-custom">
		        <ul>
		         <li class="ccay-form-row">
					    <samp class="i18n" i18nKey="技巧1：初始化" ></samp>
					    <span class="ccay-form-input">var editorBox = KindEditor.create('#textareaid', {width : '750px',height : '300px'});</span>	
				  </li>
		        
				  <li class="ccay-form-row">
					    <samp class="i18n" i18nKey="技巧2：设置值" ></samp>
					    <span class="ccay-form-input">editorBox.html("hello,欢迎使用Ccay，祝你使用愉快！");</span>	
				  </li>
				   
				  <li class="ccay-form-row">
					    <samp class="i18n" i18nKey=" 技巧3：取值  "></samp>
		                <span class="ccay-form-input">editorBox.html()</span>  
				  </li>
				  		  
				  <li class="ccay-form-row">
					    <samp class="i18n" i18nKey=" 技巧4：判断非空"></samp>
		                <span class="ccay-form-input">editorBox.isEmpty()</span>  
				 </li>
				  <li class="ccay-form-row">	    
					    <samp class="i18n" i18nKey=" 技巧5：校验字数  " ></samp>
					    <span class="ccay-form-input">方式1：包括html代码：editorBox.count();
					     <p>方式2：包含纯文本、IMG、EMBED，不包含换行符，IMG和EMBED算一个文字  editorBox.count('text') 	
					    </span>		
				  </li>		  
		      </ul>
	      </div>
	    </div>  
		<h3>html Code:</h3>
		<div class="codeArea">
			<pre id='html'>&lt;textarea id="testeditor" name="content" >&lt;/textarea></pre>
		</div>
		<h3>js Code:</h3>
		<div class="codeArea">
			<pre id='js'>
/**
*定义编辑器,KindEditor.create(参数1，参数2)方法负责产生编辑器，参数一确定生成的位置，参数2定义编辑器的设置options项。
*/
var editorBox = KindEditor.create('#testeditor', {width:'750px',height : '300px',afterChange : function() {
		KindEditor('.word_count1').html(this.count());
		KindEditor('.word_count2').html(this.count('text'));
}});

page.saveDemandEditedMessage=function(){
  //设置值
  editorBox.html("hello,欢迎使用Ccay，祝你使用愉快！");
};

page.saveEditedMessage=function(){
  //取值
  alert(editorBox.html());
}

//判断是否为空，返回true或false
 page.isEmpty=function(){
   alert(editorBox.isEmpty());
}

// 取得输入字数
page.wordCount = function(){
	    	var count1=editorBox.count();count2=editorBox.count('text')
	    	var countString1 = "您当前输入了"+count1+ "个文字。（字数统计包含HTML代码。）",
	    		countString2 = "您当前输入了"+count2+"个文字。（字数统计包含纯文本、IMG、EMBED，不包含换行符，IMG和EMBED算一个文字。) ";
	    	alert(countString1);alert(countString2);
};

			</pre>
		</div>
		<div class="try">
			<a onclick="Ccay.example.openTry('#richtext',$('#js').html(),$('#html').html())">亲自试一试</a>
		</div>
		</div>
</div>
<div title="试一试" tabid="trytab" >
	    <fieldset class='ccay-demo'>
	    <legend ><h2>代码区</h2></legend>
		   
		   <span>请在下面的文本框中编辑您的代码，然后单击此按钮测试结果  ————></span><input value="try it yourself" type="button" onclick="Ccay.example.runDemo()" /> 

				<div>
				    <table  style="width:100%;">
				      <tr>
				        <td style="width:100%;">
						<h3>js Code:</h3>	
						  <!-- 高度按需来调整。默认最小应为100px -->					
	                      <textarea id="jsTxt" style="height:100px;width:99%;"></textarea>
	                    </td>   
	                  </tr>
	                  <tr>
	                    <td style="width:100%;">
						<h3>html Code:</h3>
						  <!-- 高度按需来调整。默认最小应为100px -->
	                      <textarea id="htmlTxt" style="height:100px;width:99%;"></textarea>
	                    </td>
	                  </tr> 
                    </table>
				</div>
           </fieldset>
        <fieldset class='ccay-demo'>
          <legend ><h2>结果区</h2></legend>
			<div>
				<div style="overflow:auto;" id="demoMainPanel"></div>
			</div>
        </fieldset>
     </div>
<div title="FAQ">
  <form class="init ccay-form">
	<div class="ccay-form-body ccay-form-custom">
	    <ul>                     
	        <li class="ccay-form-row">
	            <samp><h3>问题</h3></samp>
	           <span class="ccay-form-input">
	               <h3>解决方案</h3>
	           </span>
	        </li>
	        <!-- 若问题和内容较多，可在li中的class加上ccay-form-whole -->
	        <li class="ccay-form-row ccay-form-whole">
	            <samp class="i18n" i18nKey="1.为什么第一次进入页面时，富文本组件未初始化？"></samp>                          
	            <span class="ccay-form-input">优先加载kindeditor.js,js加载顺序引起的问题</span>
	        </li>  
	    </ul>
	</div>
  </form>                    
</div>
</div>
